// 学习三个新的react-router-dom里面的组件
// 使用新的切换视图标签:NavLink,
// 使用组件实现重定向, Redirect
// 使用组件实现提高路由匹配效率:Switch
import React from 'react';
import Home from './components/Home';
import Detail from './components/Detail';
import XXX from './components/xxx';
import { Route, Redirect, NavLink, Switch } from 'react-router-dom';

export default function App() {
  return (
    <div>
      App123
      <hr />
      <NavLink to="/Home">
        {/* <NavLink to="/Home" activeClassName={'xxxx'}这个是用来设置自定义类名的 className="active">这个是默认的不用写 */}
        Home
      </NavLink>
      <hr />
      <NavLink to="/Detail">Detail</NavLink>
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      <hr />
      {/* <Route path="/" component={Home} exact></Route> */}
      <Redirect from="/" to="/XXX"></Redirect>
      <Route path="/XXX" component={XXX}></Route>
      <Route path="/Home" component={Home}></Route>
      <Route path="/Detail" component={Detail}></Route>
    </div>
  );
}
